<template>
  <div class="divWarehouse divCheckList">
    <div class="divHead box">
      <div class="searchForm">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="searchParams"
        >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="入库单号" prop="code">
              <el-input
                placeholder="请输入"
                v-model="searchParams.code"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运单编号" prop="billCode">
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.billCode"
                  clearable
                />
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="货主名称" prop="ownerName">
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.ownerName"
                  clearable
                />
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="textRight">
              <base-button
                class="minorImportantButton btnSearch"
                @click="btnSearchClick"
              >搜索</base-button>
              <base-button class="unimportanceButton" @click="btnResetClick">重置</base-button>
            </div>
          </el-col>
        </el-row>
        </el-form>
      </div>
    </div>
    <div class="divContent box">
      <div class="tableInfo">
        <base-button
          class="importantButton"
          @click="btnAddClick"
        >新增入库单</base-button>
        <base-button
          class="unimportanceButton"
          @click="btnBatchAddCheckTask([])"
        >生成收货任务</base-button>
      </div>
      <div  v-if="tableData.length>0">
        <el-table
          :data="tableData"
          stripe
          border
          ref="table"
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f9f6ee' }"
           @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            align="center"
            width="68"
            label="序号"
          />
          <el-table-column
            prop="code"
            align="center"
            label="入库单号"
            width="160"
          />
          <el-table-column
            prop="billCode"
            align="center"
            label="运单编号"
            width="150"
          />
          <el-table-column
            prop="planArrivalTime"
            align="center"
            label="计划到达时间"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="ownerCode"
            align="center"
            label="货主编号"
            width="160"
            sortable
          />
          <el-table-column
            prop="ownerName"
            align="center"
            label="货主名称"
            width="160"
            sortable
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="仓库名称"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="license"
            align="center"
            label="车牌号"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="deliveryName"
            align="center"
            label="送货人名称"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="deliveryPhone"
            align="center"
            label="送货人电话"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="入库单状态"
            width="160"
          >
            <template slot-scope="{row}">
              <span v-if="row.status === 1">新建</span>
              <span v-if="row.status === 2">收货中</span>
              <span v-if="row.status === 3">已取消</span>
              <span v-if="row.status === 4">收货完成</span>
              <span v-if="row.status === 5">上架中</span>
              <span v-if="row.status === 6">上架完成</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="planNum"
            align="center"
            label="预计到货数"
            width="160"
          />
          <el-table-column
            prop="createName"
            align="center"
            label="创建人"
            width="160"
          />
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="200"
          />
          <el-table-column label="操作" align="center" width="250" fixed="right">
            <template slot-scope="{row}">
              <base-button class="fontOperateButton" v-if="row.status === 1" @click="editClick(row.id)">修改详情</base-button>
              <base-button class="fontOperateButton" v-if="row.status === 1" @click="btnCanCleClick(row.id, row.code)">取消</base-button>
              <base-button class="fontOperateButton" v-if="row.status === 1"  @click="btnBatchAddCheckTask([row.id])">生成收货任务</base-button>
              <base-button class="fontOperateButton" v-if="row.status !== 1" @click="btnViewDetail(row.id)">查看详情</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无盘点单</p>
      </div>
      <base-list-dialog :visible="dialogData.visible"
                        :title="dialogData.title"
                        :subTitle="dialogData.subTitle"
                        :msg="dialogData.msg"
                        :itemList="dialogData.itemList"
                        :msgFailure="dialogData.msgFailure"
                        :itemListFailure="dialogData.itemListFailure"
                        @btn-sure-click="btnSureClick"
                        >
      </base-list-dialog>
      <base-dialog    :title="cancleDialogData.title"
                      :visible="cancleDialogData.visible"
                      :msg="cancleDialogData.msg"
                      @btn-cancle-click="cancleDialogData.visible= false"
                      @btn-sure-click ="btnCancleSureClick"
      ></base-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import { IWarehouseInTableData } from '@/module-storage-in/interface/warehouse-in'
import { createReceiveGoodsTask, findWarehouseInDetailPaging, cancleWarehouseIn } from '@/module-storage-in/api/warehouse-in'
import BaseListDialog from '@/components/base-dialog/index1.vue'
import BaseDialog from '@/components/base-dialog/index.vue'
import { ICommonReturn } from '@/utils/common-interface'

@Component({
  name: 'StorageInList',
  components: {
    BaseButton,
    BasePagination,
    BaseListDialog,
    BaseDialog
  }
})

export default class extends Vue {
  private tableData: IWarehouseInTableData[] = []
  private loading = false
  private searchParams = {
    code: '',
    billCode: '',
    ownerName: ''
  }

  private dialogData = {
    ids: [] as number[],
    title: '生成收货任务',
    subTitle: '',
    msg: '',
    itemList: [] as string[],
    visible: false,
    msgFailure: '',
    itemListFailure: [] as string[]
  }

  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  private cancleDialogData = {
    title: '取消确认',
    visible: false,
    msg: '',
    id: 0
  }

  @Watch('$route', { immediate: true })
  private onRouteChange() {
    this.getList()
  }

  private btnSearchClick() {
    this.getList()
  }

  private btnResetClick() {
    (this.$refs as any).ruleForm.resetFields()
    this.getList()
  }

  private btnAddClick() {
    // if (this.confirmMsg()) {
    //   return
    // }
    // this.$router.push({ path: 'list/details/null' })
  }

  private getParams() {
    const current = this.paging.current
    const size = this.paging.size
    const params = {
      ...this.searchParams,
      current,
      size
    }
    return params
  }

  private async getList() {
    this.loading = true
    const params = this.getParams()
    const { data } = await findWarehouseInDetailPaging(params)
    this.loading = false
    this.tableData = data.records
    this.paging.total = parseInt(data.total, 10)
  }

  private editClick(id:string) {
    this.$router.push({ path: `list/details/${id}` })
  }

  private handleCurrentChange(page:number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page:number) {
    this.paging.size = page
    this.paging.current = 1
    this.getList()
  }

  private handleSelectionChange(items:IWarehouseInTableData[]) {
    this.dialogData.ids = items.map(item => {
      return item.id
    })
  }

  private filterHandler(value:any, row:any, column:any) {
    const property = column.property
    return row[property] === value
  }

  private async btnBatchAddCheckTask(ids:number[]) {
    if (ids.length > 0) { // 编辑
      this.dialogData.ids = ids
    }
    const dialogData = this.dialogData
    if (dialogData.ids.length === 0) {
      this.$message.error('请选择入库单')
    } else {
      this.dialogData = {
        ids: [] as number[],
        title: '生成收货任务',
        subTitle: '',
        msg: '',
        itemList: [] as string[],
        visible: false,
        msgFailure: '',
        itemListFailure: [] as string[]
      }
      const { data } = await createReceiveGoodsTask(dialogData.ids)
      const errors = data.errors as string[]
      const results = data.results as string[]
      if (results.length > 0) {
        this.dialogData.msg = '收货任务编号如下，请在收货任务中查看'
        this.dialogData.itemList = results
        this.dialogData.subTitle = results.length + ' 个收货任务生成成功！'
      }

      if (errors.length > 0) {
        if (errors.length > 0) {
          this.dialogData.msgFailure = '失败原因如下'
        }
        this.dialogData.itemListFailure = errors
        this.dialogData.subTitle += (errors.length + '个收货任务生成失败！')
      }
      this.dialogData.visible = true
      this.getList()
    }
    (this.$refs.table as any).clearSelection()
  }

  private btnSureClick() {
    this.dialogData.visible = false
  }

  private btnViewDetail(id:number) {
    this.$router.push({ path: `list/list-detail/${id}` })
  }

  private btnCanCleClick(id:number, code:string) {
    this.cancleDialogData = {
      id: id,
      msg: `确认取消入库单号为${code} 的入库单吗？`,
      visible: true,
      title: '取消确认'
    }
  }

  private async btnCancleSureClick() {
    const data = ((await cancleWarehouseIn({
      id: this.cancleDialogData.id
    })) as unknown) as ICommonReturn
    if (data.code === 0) {
      this.$message.success('成功取消')
      this.cancleDialogData.visible = false
      this.getList()
      this.cancleDialogData.id = 0
    } else {
      this.$message.error(data.msg)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
